<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>落叶</title>
</head>

<!--        引入样式文件-->
<link rel="stylesheet" href="../plugins/elementui/index.css">
<link rel="stylesheet" href="../css/arricle.css">
<link rel="stylesheet" href="../css/index.css">

<body>

<div id="article" class="content">
    <el-container>
        <el-header>
            <div class="header">
                <dt class="back"><a href="index.html">爱玲酱真的太好了</a></dt>
            </div>
            <hr>
        </el-header>
        <el-main>
            <div>
                <div class="title2">
                    <span v-html="article.title" class="bt">文章标题</span>
                    <a class="username" href="index.html">许闻涛</a>
                </div>
                <hr/>
                <div class="subtitle2" v-html="article.subtitle">
                </div>
                <div class="mainBody" v-html="article.content"></div>
            </div>
        </el-main>
        <el-footer></el-footer>
    </el-container>

</div>


</body>

<!-- 引入组件库 -->
<script src="../js/axios-0.18.0.js"></script>
<script src="../js/jquery.min.js"></script>
<script src="../js/vue.js"></script>
<script src="../plugins/elementui/index.js"></script>

<script>
    new Vue({
        el: '#article',
        data() {
            return {
                article: {
                    title: '涛酱的自我救赎',
                    subtitle: '文章副标题<br>文章副标题<br>文章副标题<br>',
                    content: '文章副标题<br>文章副标题<br>文章副标题<br>文章副标题<br>文章副标题<br>文章副标题<br>文章副标题<br>文章副标题<br>文章副标题<br>',
                    user: {
                        username: '许闻涛'
                    }
                }

            }
        }
    })
</script>
</html>